<template>
  <div class="usercenter-box">
    <div class="common-usercenter-box">
      <h6 class="common-title">我的余额</h6>
      <div class="myorderbox common-form-set">
    <section>
      <div class="box">
        <span>您的账户余额：</span>
        <em>￥{{ (user.userMoney ? user.userMoney.money : 0) | n3 }}</em>
        <a href="/charge4">
          <el-button type="warning">我要充值</el-button>
        </a>
        <a href="/transfer4">
          <el-button type="warning" plain>我要转账</el-button>
        </a>
        <a href="/withdraw4">
          <el-button type="success" plain>我要提现</el-button>
        </a>
      </div>
      <ul>
        <li>
          <span>账户总额</span>
          <div>{{ (user.userMoney ? user.userMoney.money : 0) | n3 }}/￥</div>
        </li>
        <li>
          <span>可用余额</span>
          <div>
            {{ (user.userMoney ? user.userMoney.saleMoney : 0) | n3 }}/￥
          </div>
        </li>
        <li>
          <span>冻结金额</span>
          <div>
            {{ (user.userMoney ? user.userMoney.frozenMoney : 0) | n3 }}/￥
          </div>
        </li>
        <li>
          <span>未转余额</span>
          <div>
            0.000/￥
            <!-- <a href="/supply/balance">转款</a> -->
          </div>
        </li>
      </ul>
    </section>
  </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  layout: 'webIn4',
  computed: {
    ...mapState({
      user: (state) => state.user
    })
  }
}
</script>

<style lang="scss" scoped>
@import 'element-ui/lib/theme-chalk/index.css';

section {
  padding: 15px;
  background: white;
  .box {
    padding: 15px;
    border: 1px solid $--basic-border-color;
    a {
      margin-left: 20px;
    }
  }
  ul {
    margin-top: 15px;
    padding-bottom: 100px;
    font-size: 14px;
    // border-bottom: 1px solid $--basic-border-color;
    li {
      width: 165px;
      height: 80px;
      padding: 15px 0 0 15px;
      display: inline-block;
      border: 1px solid $--basic-border-color;
      &:hover {
        border: 1px solid $--color-primary;
      }
      div {
        margin-top: 15px;
        a {
          float: right;
          color: $--color-primary;
          margin-right: 15px;
          &:hover {
            color: $--alert-red;
          }
        }
      }
    }
    li + li {
      margin-left: 20px;
    }
  }
  h5 {
    margin: 23px 0 15px 0;
  }
}
@import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style8/common.css';
@import 'assets/style/style8/style.css';
@import 'assets/style/style8/font_1451715_0505c2bxv7b7.css';

</style>
